src/components/video-editor/ShortcutsConfigDialog.tsx (1)

200-207: Apply proper shrink constraints for reliable text truncation in flex layouts.

The truncate utility on line 207 may not work reliably in the parent inline-flex container without explicit shrink constraints. In flex layouts, child elements don't shrink below content size unless the item has min-w-0 or equivalent sizing.

Suggested improvement

          <Button
             title={t('shortcutsConfig.resetToDefaults')}
             variant="ghost"
             size="sm"
-            className="text-slate-400 hover:text-white hover:bg-white/10 gap-1.5 max-w-[200px]"
+            className="text-slate-400 hover:text-white hover:bg-white/10 gap-1.5 max-w-[200px] min-w-0"
             onClick={handleReset}
           >
             <RotateCcw className="w-3 h-3" />
-            <span className="truncate">{t('shortcutsConfig.resetToDefaults')}</span>
+            <span className="truncate min-w-0 flex-1 block">{t('shortcutsConfig.resetToDefaults')}</span>
           </Button>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/video-editor/ShortcutsConfigDialog.tsx` around lines 200 -
207, The truncate span inside ShortcutsConfigDialog's reset button won't
reliably ellipsize in its inline-flex parent; update the element with an
explicit shrink constraint (e.g., add the utility such as min-w-0 or
overflow-hidden/flex-shrink-0 removal) on the truncating element or its
immediate flex container so the text can shrink; locate the <span
className="truncate"> inside the reset button (the component using RotateCcw and
handleReset) and add min-w-0 (or equivalent shrink/overflow classes) to enable
correct truncation.